<!DOCTYPE html>
<html>
<head>
<title><g:layoutTitle default="directoryapp" /> - we find it
	for you</title>
<link rel="stylesheet" href="${resource(dir:'css',file:'main.css')}" />
<g:layoutHead />
<g:javascript library="application" />
<g:javascript library="jquery" plugin="jquery" />
<%--<g:javascript src="jquery.autocomplete.js"></g:javascript>
--%>
<jq:jquery> 
	    jQuery(function () {
	        jQuery("#txtAutoCompleteSearch").keyup(function() {
    			jQuery("body").append('<div id="lolxorz"></div>');
    			var divR = jQuery("#lolxorz");
    			divR.load("http://localhost:5678/directoryapp/employee/search/" + jQuery(this).val());
				divR.css("position","absolute");
				divR.css("left", 183);
				divR.css("top", 26);
				divR.css("width", "200px");
    			divR.css("background", "white");
    		});
    	})
    	
    </jq:jquery>
</head>
<body>
	<div class="topBar">
		<a href=""><img
			src="${resource(dir:'images',file:'directoryapp_header.png')}"
			alt="Grails" border="0" /> </a>
		<input id="txtAutoCompleteSearch"
			name="searchField" type="text" style="position:absolute; top:4px; height: 13px"/>
	</div>
	<div class="leftBar">
		<ul>
			<li>rerewrererer</li>
			<li>rerewrererer</li>
			<li>rerewrererer</li>
			<li>rerewrererer</li>
			<li>rerewrererer</li>
			<li>rerewrererer</li>
			<li>rerewrererer</li>
			<li>rerewrererer</li>
			<li>rerewrererer</li>
			<li>rerewrererer</li>
			<li>rerewrererer</li>
			<li>rerewrererer</li>
			<li>rerewrererer</li>
			<li>rerewrererer</li>
			<li>rerewrererer</li>
			<li>rerewrererer</li>
			<li>rerewrererer</li>
			<li>rerewrererer</li>
			<li>rerewrererer</li>
			<li>rerewrererer</li>
		</ul>
	</div>
	<%--<div class="leftBar">
	        <div id="grailsLogo">
				<a href=""><img src="${resource(dir:'images',file:'directoryapp.png')}" alt="Grails" border="0" /></a>
	        </div>
        	<ul>
        		<li>list</li>
        	</ul>
        </div>
        --%>
	<g:layoutBody />
</body>
</html>